/8<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖放</title>
</head>
<body>
	<h1>拖放示例</h1>
	<div id="dragme" draggable="true" style="width: 200px;border:1px solid red;margin-bottom: 20px;">请拖放</div>
	<div id="text" style="width: 200px;height: 200px;border:1px solid green;"></div>
	<script>
		var dragIcon = document.createElement('img');
		dragIcon.src = "hy.png";

		var source = document.getElementById("dragme");
		var dest = document.getElementById("text");
		source.addEventListener("dragstart",function(ev) {
			//把要拖动的数据存入DataTransfer对象，它的setData("type","value")
			var dt = ev.dataTransfer;
			//自定义拖拽图标
			dt.setDragImage(dragIcon,-10,-10);
			dt.effectAllowed = "all";
			dt.setData("text/plain","你好");
		},false);
		
		dest.addEventListener("drop",function(ev) {
			var dt = ev.dataTransfer;
			var text = dt.getData("text/plain");
			dest.textContent += text;
			ev.preventDefault();
			ev.stopPropagation();
		},false);

		//关闭默认处理
		dest.addEventListener("dragend",function(ev) {
			ev.preventDefault();
		},false);
		//关闭默认处理
		document.ondragover = function(e) {
			e.preventDefault();
		}
		//整个页面不执行默认处理(拒绝被拖放)
		document.ondrop = function(e) {
			e.preventDefault();
		}
	</script>
</body>
</html>